<template>
  <div>
    <h3>通过computed回调函数得到的state组件里的值为：{{ count }}</h3>
    <h3>通过getters得到的state组件里的值为：{{ num }}</h3>
    <h3>调用actions异步组件得到的返回值为：{{ flag }}</h3>
    <button @click="handleSub1()">无参-1</button>
    <button @click="havaReturn()">无参有返回</button>
    <button @click="useGetters()">调用getters</button>
  </div>
</template>
<script setup>
import {useStore} from 'vuex';
import {computed,ref} from "vue";

//获取store
const store = useStore();
//获取共享数据的方式2：通过computed回调函数
const count = computed(() => store.state.count);

let num=ref(0);

let flag = ref('0');
  function handleSub1() {
    //调无参的共享方法
    store.commit('subtraction');
  }

  function havaReturn() {
    //调异步的有返回值的方法
    store.dispatch('havaReturnAsync').then((res) => {
      console.log(res);
      flag.value = res;
    }).catch((error) => {
      console.error('An error occurred:', error);
    });
  }

  function useGetters() {
    //调用getters并不会改变state里变量的值
    num.value=store.getters.doubleCount;
  }
</script>
